<script lang="ts" setup>
import * as TemplateManagerApi from '@/api/creative/smart-media/template-manager'
import { formatDate } from '@/utils/formatTime'
import { SuccessFilled } from '@element-plus/icons-vue'

const props = defineProps({
  type: {
    type: String,
    default: 'Timeline'
  }
})

const emit = defineEmits(['createProject'])

const loading = ref(true)
const total = ref(0)
const templateList = ref<any[]>([])
const queryParams = reactive({ pageNo: 1, pageSize: 20, keyword: null, type: props.type })
const queryFormRef = ref() // 搜索的表单

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await TemplateManagerApi.listTemplates(queryParams)

    templateList.value = data.templates
    total.value = data.totalCount
  } finally {
    loading.value = false
  }
}

/** 初始化 **/
onMounted(() => {
  getList()
})

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

const statusMap = {
  Available: '可用',
  Created: '已创建',
  Uploading: '上传中',
  Processing: '加载中',
  UploadFailed: '上传失败',
  ProcessFailed: '加载失败'
}

/** 通过模板创建项目 */
const startNewCreation = (template: any) =>
  emit('createProject', template.templateId, template.clipsParam)
</script>

<template>
  <!-- 搜索工作栏 -->
  <ContentWrap>
    <el-form
      ref="queryFormRef"
      class="-mb-15px"
      :model="queryParams"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="关键字" prop="keyword">
        <el-input
          v-model="queryParams.keyword"
          placeholder="请输入关键字"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" />搜索</el-button>
        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" />重置</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="templateList">
      <el-table-column label="模板" width="350">
        <template #default="scope">
          <div>
            <div class="text-gray-900">{{ scope.row.name }}</div>
            <div class="text-gray-400 text-sm">ID: {{ scope.row.templateId }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template #default="scope">
          <el-icon color="rgb(53, 179, 74)"><SuccessFilled /></el-icon>
          <span class="ml-2">{{ statusMap[scope.row.status] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template #default="scope">
          <span>{{ formatDate(scope.row.creationTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template #default="scope">
          <span>{{ formatDate(scope.row.creationTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" size="small" @click="startNewCreation(scope.row)"
            >使用模板</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>
</template>

<style scoped></style>
